﻿var colors = ['#bd4fff', '#8be68e', '#dce19d', '#62edf8', '#0676A7', '#7FFFD4', '#027db4', '#03b915', '#ffe400', '#EE9A4D'];

/**
 堆叠条形图绑定数据方法（横向）
 **/
function Chart_DDZX(datas, title) {
    var option = {
        color: ['#91cc75', '#5470c6'],
        title: {
            text: title,
            // subtext: text,
            left: 'left'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: datas["names"]
        },
        series: datas.datas
    };
    return option;
}
/***
纵向柱形图(带百分比,美化)
**/
function Chart_ZongZHx_BFB(datas, title, bgColor) {

    // var colorList=['#C467FF','#C467FF ','#C467FF','#C467FF','#4B8BFF'];
    var maxArr = (new Array(datas.length)).fill(100);
    option = {
        backgroundColor: bgColor,// "#061740",
        title: {
            text: title,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },

        },
        grid: {
            left: 40,
            right: 40,
            bottom: 20,
            top: 10,
            containLabel: true
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'none'
            },
            formatter: function (params) {
                return params.name + ' : ' + params.value
            }
        },
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
                show: true,
                align: 'right',
                color: '#ededed',//Y轴字体颜色
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: datas.map(item => item.name)
        }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
                textStyle: {
                    color: '#ededed',//百分比字体颜色
                    fontSize: '12'
                },
                formatter: '{value}%'
            },
            data: datas.map(item => item.value)
        }],
        series: [{
            name: '值',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: "#00BB94"
                    /** 柱形图颜色 如果需要根据条件设置颜色，可以考虑启用此代码
                    color: (params) => {
                        return colorList[params.dataIndex]
                    }**/
                },
            },
            barWidth: 20,
            data: datas
        },
        {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: maxArr,
            itemStyle: {
                normal: {
                    color: '#15317E',//未完成颜色
                    barBorderRadius: 30,
                }
            },
        },
        ]
    };
    return option;
}
/**
 * 横向柱形图(美化)
 */
function Chart_HengZHx(xData, yData, nData, bgColor, title) {

    var data0 = [1, 1, 1, 1, 1, 1, 1];
    var data1 = yData;
    var data4 = nData;
    var data3 = [];
    var data5 = [];
    for (let i = 0; i < data1.length; i++) {
        data3.push(data1[i] + data4[i]);
    }
    for (let i = 0; i < data1.length; i++) {
        data5.push(data1[i]);
    }
    option = {
        backgroundColor: bgColor, //背景色
        title: {
            text: title,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            }
        },
        tooltip: {
            trigger: 'axis',
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(13,5,30,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 5,
            formatter: function (parms) {
                var str =
                    parms[0].axisValue +
                    '</br>' +
                    parms[0].marker +
                    '未完成：' +
                    parms[0].value +
                    '</br>' +
                    parms[1].marker +
                    '完成：' +
                    parms[1].value;
                return str;
            },
        },
        textStyle: {
            color: '#C9C9C9',
        },

        // color: ['#fbc292', '#06fbfe',  '#f06e91'],

        grid: {
            borderWidth: 0,
            x: 70,
            x2: 65,
            y: 40,
            y2: 80,
            textStyle: {
                color: '#fff',
            },
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)',
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    margin: 30,
                    align: 'center',
                    rotate: 20,
                    color: '#ffff',
                    fontSize: 12,
                    lineHeight: 8,
                    formatter: function (name, index) {
                        switch (index) {
                            case 0:
                                return name.substring(0, 4) + '\n' + '\n' + name.substring(4);
                            case 1:
                                return name.substring(0, 4) + '\n' + '\n' + name.substring(4);
                            case 2:
                                return name.substring(0, 7) + '\n' + '\n' + name.substring(7);
                            case 3:
                                return name.substring(0, 7) + '\n' + '\n' + name.substring(7);
                            case 4:
                                return name.substring(0, 5) + '\n' + '\n' + name.substring(5);
                            case 5:
                                return name.substring(0, 7) + '\n' + '\n' + name.substring(7);
                            case 6:
                                return name.substring(0, 11) + '\n' + '\n' + name.substring(11);
                            case 7:
                                return name.substring(0, 13) + '\n' + '\n' + name.substring(13);
                            case 8:
                                return name.substring(0, 5) + '\n' + '\n' + name.substring(5);
                            case 9:
                                return name.substring(0, 2) + '\n' + '\n' + name.substring(2);
                            default:
                                return name;
                        }
                    },
                },
                data: xData,
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '',//Y轴单位
                nameTextStyle: {
                    //y轴上方单位的颜色
                    color: '#fff',
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: '#ffff',
                    fontSize: 16,
                },
            },
        ],
        series: [
            {
                type: 'bar',
                name: '未完成',
                type: 'bar',
                data: data1,
                stack: 'zs',
                barMaxWidth: 'auto',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#06fbfe',
                                },
                                {
                                    offset: 1,
                                    color: '#017ebb',
                                },
                            ],
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                            },
                            position: ['120%', '50%'],
                            formatter: function (p) {
                                return p.value;
                            },
                        },
                    }
                },
            },

            {
                name: '完成',
                type: 'bar',
                data: data4,
                stack: 'zs',
                type: 'bar',
                barMaxWidth: 'auto',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#05b76e',
                                },
                                {
                                    offset: 1,
                                    color: '#028878',
                                },
                            ],
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                            },
                            position: ['120%', '50%'],
                            formatter: function (p) {
                                return p.value;
                            },
                        },
                    }

                },
            },

            {
                data: data0,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [30, 20],
                zlevel: 2,
                itemStyle: {
                    normal: {
                        color: '#0184be',
                    },
                },
            },
            {
                data: data1,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [30, 20],
                zlevel: 2,
            },
            {
                data: data1,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [30, 20],
                zlevel: 2,
            },
            {
                data: data5,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [0, 20],
                zlevel: 2,
            },
            {
                data: data5,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [30, 20],
                zlevel: 2,
                itemStyle: {
                    normal: {
                        color: '#06fbfe',
                    },
                },
            },
            {
                data: data3,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [30, 20],
                zlevel: 2,
                itemStyle: {
                    normal: {
                        color: '#07e564',
                    },
                },
            },
        ],
    };
    return option;
}


/**
  * 纵向柱形图(美化)
  * **/
function Chart_ZongZhx(names, values, bgColor) {
    const data = names
    const valueArr = values
    option = {
        backgroundColor: bgColor,
        textStyle: {
            color: '#fff'
        },
        tooltip: {
            show: true,
            padding: 15,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter(params) {
                const item = params[0]; return `
        不合格数
        <br/>
        ${item.value}
      `;
            },
            extraCssText: 'width:85px;height:46px;'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',

            name: '',
            nameGap: 2,
            nameLocation: 'end',
            // 坐标轴单位位置偏移
            nameTextStyle: {
                padding: [0, 0, 100, -10],
                top: '2%'
            },
            show: true,
            // 不显示轴线
            axisLine: {
                show: true
            },
            // 不显示刻度线
            axisTick: {
                show: false
            },
            splitLine: {// 网格线为虚线
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108,128,151,0.3)'
                }

            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#6C8097'
                    }
                },
                axisLabel: {
                    interval: 0,
                    color: '#D0DEEE',
                    formatter: function (value) {
                        var ret = '';
                        var maxLength = 5; // 换行字数
                        var valLength = value.length;
                        var rowN = Math.ceil(valLength / maxLength);
                        if (rowN > 1) {
                            for (var i = 0; i < rowN; i++) {
                                var temp = '';
                                var start = i * maxLength;
                                var end = start + maxLength;
                                temp = value.substring(start, end) + '\n';
                                ret += temp;
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    }
                },
                data: data
            }
        ],
        series: [
            {
                type: 'bar',
                barWidth: 10,
                zlevel: 2,
                barGap: '-150%',
                itemStyle: {
                    normal: {
                        color: function (params) {


                            return new echarts.graphic.LinearGradient(0, 0, 1.2, 0, [{
                                offset: 0,
                                color: 'rgba(26,255,255,0.1)'
                            },
                            {
                                offset: 1,
                                color: '#1AFFFF'
                            }
                            ], false);
                        }
                    }
                },
                data: valueArr
            }

        ]
    };
    return option;
}

/**
  * 纵向柱形图,标题内嵌(美化)
  * **/
function Chart_ZongZhx_bt(data, bgColor, title) {
    const totalSum = data[0].value / data[0].value * 100
    const seriesData = data.map(item => item.value)
    let maxSeriesData = []
    for (let i = 0; i < seriesData.length; i++) {
        maxSeriesData[i] = totalSum
    }

    const rankBarColor = arr => {
        let res = []
        arr.forEach(item => {
            res.push({
                value: item,
                itemStyle: {
                    color: '#306EFF'//进度条颜色
                }
            })
        })
        return res
    }

    const formatLeftText = arr => {
        let res = arr.map(item => {
            return {
                value: item.name,
                textStyle: {
                    color: 'white',//Y轴字体颜色
                    fontSize: 13,
                    verticalAlign: 'bottom',
                    lineHeight: 25,
                    align: 'left'
                }
            }
        })
        return res
    }

    const formatRightText = arr => {
        let res = arr.map(item => {
            let val = item.value
            let extra = ''
            if (item.extra) {
                extra = item.extra
            }
            return {
                value: `${val} % `,
                textStyle: {
                    color: 'white',
                    verticalAlign: 'bottom',
                    lineHeight: 28,
                    align: 'right'

                }
            }
        })
        return res
    }

    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            top: '1%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: '#fff',//提示框背景颜色

            textStyle: {
                color: 'rgba(0,0,0,0.65)'//提示框字体颜色
            },
            formatter: (param) => {
                let result = `<div>${param[0].marker}${param[0].name}</div>`
                result += `<div>不合格率：${param[0].value}% </div>`

                return result
            }
        },
        grid: {
            top: 50,

        },
        xAxis: {
            type: 'value',
            max: 'dataMax', // 以最大值为顶点
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false }
        },
        yAxis: [
            {
                type: 'category',
                position: 'left',
                offset: -8,
                inverse: true,
                axisLine: { show: false },
                axisTick: { show: false },
                data: formatLeftText(data)
            }, {
                type: 'category',
                position: 'right',
                inverse: true,
                axisLine: { show: false },
                axisTick: { show: false },
                data: formatRightText(data)
            }
        ],
        series: [
            {
                zlevel: 1,
                type: 'bar',
                barWidth: 6,
                data: rankBarColor(seriesData)
            }, {
                type: 'bar',
                name: '',
                barGap: "-100%",
                barWidth: 8,
                itemStyle: {
                    color: '#15317E'//进度条背景颜色
                },
                data: maxSeriesData
            }
        ]
    };
    return option;
}
/**
    * 柱形图 美化
    */
function Chart_Zhx01(xData, yData, title, bgColor) {
    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            left: 'left',
            top: '3%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },

        },
        tooltip: { trigger: "axis", axisPointer: { type: "shadow", } },
        grid: { left: "4%", right: "4%", top: "25%", bottom: "10%", containLabel: true },
        yAxis: {
            nameTextStyle: { fontSize: 20, color: "#fff" },
            type: "value",
            splitLine: { show: false },
            axisLine: { show: true, textStyle: { color: "#1ebfda", } },
        },
        xAxis: {
            type: "category",
            data: xData,
            axisLine: {
                show: true,
                textStyle: {
                    color: "#1ebfda",
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                    color: "rgba(219, 225, 255, 1)"
                },
                formatter: function (params) {
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 3; //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName;
                }
            }
        },
        series:
        {
            type: "bar",
            barWidth: 14,
            barGap: "40%",
            data: yData,
            itemStyle: {
                // barBorderRadius: [4, 24, 0, 0],
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: '#00BB94',
                },
                {
                    offset: 0.9,
                    color: '#00BB94'
                }
            ]),
        },

    }
    return option;
}

/**
   堆叠柱状图数据显示（纵向）
   **/
function Chart_DDZZT(datas, title) {
    var option = {
        title: {
            text: title,
            // subtext: text,
            left: 'left'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            itemHeight: '100%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: datas.names
        },
        yAxis: {
            type: 'value'
        },
        series: datas.datas
    };
    return option;
}

/**
   饼状图(美化) 环形
   数据格式:[{name:"",value:2},{name:"",value:2},.....]
   **/
function Chart_Pie01(datas, title, bgColor) {
    var data = datas;
    var color = ['#7F38EC', '#6CC417', '#fd6f97', '#ff8c37', '#a181fc', '#3BB9FF', '#7FFFD4', '#FFDB58', '#389af4',];//颜色列表
    option = {
        backgroundColor: bgColor,
        color: color,
        title: {
            text: title,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: '#C2DFFF',
            color: '#fff',
            formatter: function (params) {
                return (
                    params.name +
                    '<br/>' +

                    params.data['value'] +
                    '</span>'
                );
            }
        },
        legend: {
            orient: 'vertical',
            icon: "circle",
            left: '2%',
            top: '25%',
            itemWidth: 10,
            itemGap: 8,
            textStyle: {
                rich: {
                    a: {
                        color: '#fff',
                        fontSize: 12,
                        padding: [0, 10, 0, 0]
                    },
                    b: {
                        color: '#fff',
                        fontSize: 12,
                        padding: [0, 10, 0, 10]
                    }
                }
            },
            formatter: function (name) {

                return `{a| ${name}}`;
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['68%', '60%'],
                avoidLabelOverlap: true,
                label: {
                    normal: {
                        show: false,//不显示标签内容
                        position: 'inside',
                        formatter: '{d}',
                        textStyle: {
                            align: 'center',
                            baseline: 'middle',
                            fontSize: 12,
                            fontWeight: '100',
                            color: '#fff'
                        }
                    }
                },
                labelLine: {
                    show: false
                },

                data: data
            }
        ]
    };
    return option;
}
/**
   饼状图(美化) 
   数据格式:[{name:"",value:2},{name:"",value:2},.....]
   **/
function Chart_Pie02(datas, title, bgColor) {

    option = {
        backgroundColor: bgColor,
        color: colors,
        title: {
            text: title,
            left: 'left',
            top: '5%',
            left: '2%',
            textStyle: {
                color: "#0C090A",
                fontSize: 12
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ",
        },
        toolbox: {
            show: true,
        },
        series: [
            {
                type: "pie",
                radius: [0, 75],//元饼图的大小
                label: {
                    show: true, //false不显示饼图上的标签
                    position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
                    formatter: '{b}:{c}',
                },
                data: datas,
            },
        ],
    };
    return option;
}

/**
 * 数据集合柱形图
 * **/
function Chart_JHZX(data, title) {
    option = {
        backgroundColor: "#061740",
        color: ['#91cc75', '#5470c6', '#EE5977'],
        title: {
            text: title,
            // subtext: text,
            left: 'left'
        },
        legend: {},
        tooltip: {},
        dataset: {
            source: data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        //series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        series: [{
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                color: 'black'
            },
        }, {
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                color: 'black'
            },
        }, {
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                color: 'black'
            },
        }]
    };
    return option;
}

function Chart_JHZhX(xData, hgData, nData, maxValue) {

    var option = {
        backgroundColor: "#061740",
        legend: {
            show: true,
            top: '6%',
            right: '5%',
            itemWidth: 25,
            itemHeight: 14,
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            },
            data: ["完成数", "未完成数"]
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true,
                    fontSize: 14,
                    borderColor: '#fff',
                    shadowOffsetY: 0,
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: xData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: "#FFFFFF",
                    fontSize: 14,
                    fontWeight: 400
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(12,116,123,0.5)",
                },
            },
        }],
        yAxis: [{
            type: 'value',
            min: 0,
            name: "",
            nameTextStyle: {
                color: "#FFFFFF",
            },
            boundaryGap: false,
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: "#FFFFFF",
                    fontSize: 14,
                    fontWeight: 400
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgba(12,116,123,0.5)",
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(12,116,123,0.5)",
                },
            },
        }],
        series: [{
            name: "完成数",
            type: 'bar',
            data: hgData,
            barWidth: 24,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(42,245,152,1)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(17,153,142,1)',
                    },
                ]),
            }
        },
        {
            name: "未完成数",
            type: 'bar',
            data: nData,
            barWidth: 24,
            barGap: "40%",
            barCategoryGap: "30%",
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: 'rgba(170,169,169,1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,1)',
                        },
                    ]),
                }
            }
        },
        ],
    };
    return option;
}
/**
折线(美化)
names:X轴数据集合(['A1','A2',.....])
values:Y轴数据集合([13,14,.....])
**/
function Chart_ZheXian(names, values, title, bgColor) {
    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            color: "white",
            top: '2%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },
        },


        tooltip: {
            trigger: 'axis',
        },

        grid: {
            top: '20%',
            left: '10%',

            bottom: '17%',
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    show: true,
                },
                axisLabel: {

                    fontSize: 12, //X轴字体大小
                    color: 'white'//提示框颜色
                },
                data: names,

            },
        ],

        yAxis: [
            {
                type: 'value',
                // min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#B7CEEC',//线的颜色
                    },
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    margin: 10,
                    formatter: '{value}',
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '未完成',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 12,
                lineStyle: {
                    normal: {
                        color: '#7AA1FF',//折线颜色
                    },
                },
                itemStyle: {
                    color: '#157DEC',
                    borderWidth: 0.5,
                    borderColor: '#157DEC',//点颜色
                },
                data: values,
            }

        ],
    };
    return option;

}
/**
曲线图
**/
function Chart_QuXian(xData, legendData, seData) {
    var option = {
        backgroundColor: "#061740",
        grid: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 0,
            top: '15%',
            left: '3%',
            right: '3%',
            bottom: '20%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            orient: 'vertical',
            left: 'center',
            bottom: 'bottom',
            padding: [10, 0, 0, 0],
            data: legendData,
            //图例滚动
            // type: 'scroll',
            //图例文字样式
            textStyle: {
                color: 'rgba(36, 173, 254, 1)',
                fontSize: "1rem"
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    show: false,
                },
                interval: 1,
                axisLabel: {
                    color: 'rgba(36, 173, 254, 1)',
                    fontSize: "1rem"
                },
                axisLine: {
                    show: false
                },
                data: xData,
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value} '
                },
                axisLabel: {
                    textStyle: {
                        //坐标轴颜色
                        color: 'rgba(36, 173, 254, 1)',
                        fontSize: "1rem"
                    }
                },
                //坐标轴线样式
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid', //solid实线;dashed虚线
                        color: 'rgba(36, 173, 254, 0.2)'
                    }
                },
            },
            {
                type: 'value',
                name: '',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value}'
                },
                axisLabel: {
                    textStyle: {
                        //坐标轴颜色
                        color: 'rgba(36, 173, 254, 1)',
                        fontSize: "1rem"
                    }
                },
                //坐标轴线样式
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        color: 'rgba(36, 173, 254, 0.2)'
                    }
                },
            }
        ],
        series: seData
    };
    return option;
}

/**
曲线
**/

function Chart_QuXian(xValue, yValue, maxValue) {
    option = {
        ///backgroundColor: '#021B6C',
        title: {
            show: false,
            text: '多线图',
            textStyle: {
                align: 'center',
                color: '#fff',
                fontSize: 20,
            },
            top: '5%',
            left: 'center',
        },
        dataZoom: [
            {
                type: 'inside',
                // filterMode: 'filter',
                realtime: true,
                // "start": 10,
                // "end": 90
            },
            {
                show: true,
                xAxisIndex: [0],
                realtime: true,
                height: 4,//这里可以设置dataZoom的尺寸
                bottom: '1%',
                backgroundColor: '#1d76e6', // 填充颜色
                textStyle: {
                    color: 'black' // 左右两边文字颜色
                },
            }
        ],
        tooltip: {
            trigger: 'axis',
            // formatter: '{b}：{c}个',
            backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: '#fff'
            },
            borderColor: "black",
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#4A4AFF'
                        }, {
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, {
                            offset: 1,
                            color: 'rgba(0, 255, 233,0)'
                        }],
                        global: false
                    }
                },
            },
        },
        grid: {
            top: '15%',
            left: '4%',
            right: '5%',
            bottom: '6%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#26367A'
                }
            },
            splitArea: {
                // show: true,
                color: '#f00',
                lineStyle: {
                    color: 'yellow'
                },
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(198, 207, 255, 1)',
                    fontSize: 12
                },
                // color: '#fff',
                // rotate: 0,
                // margin: 10,
                interval: 0,
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            data: xValue,
            boundaryGap: ['10%', '10%']

        }],

        yAxis: [{
            type: 'value',
            name: '',
            nameTextStyle: {
                color: '#3C3C3C',
                fontSize: '11px',
            },
            min: 0,
            max: maxValue,
            splitNumber: 4,
            splitLine: {
                show: true,
                interval: '0',
                lineStyle: {
                    color: ['#7B7B7B'],//横线颜色
                    type: 'dashed',
                    width: 1
                }
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                // margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: 'rgba(198, 207, 255, 1)'
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '数量',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                normal: {
                    color: "rgba(23, 174, 230, 1)",//折线曲线颜色
                    shadowColor: 'rgba(0, 0, 0, 0)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: 'rgba(1, 251, 246, 1)',
                    fontSize: 16
                }
            },
            itemStyle: {
                color: "#46A3FF",//原点颜色
                borderColor: "rgba(255, 255, 255, .2)",
                borderWidth: 10,
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0,
                shadowOffsetY: 1,
                shadowOffsetX: 1,
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(7, 251, 246, 0.56)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(7, 251, 246, 0)'
                        }
                    ],
                    global: false // 缺省为 false
                }
            },
            data: yValue
        }
        ]
    };
    return option;
}

/**
合格率
**/
function Chart_HGL(title, v_text, yValue, nValue, bgColor) {
    option = {
        backgroundColor: bgColor,
        title: [
            {
                text: title,
                x: 'center',
                top: '33%',
                textStyle: {
                    color: 'white',//字体颜色
                    fontSize: 18,
                    fontWeight: '30',
                },
            },
            {
                text: v_text,
                x: 'center',
                top: '50%',
                textStyle: {
                    fontSize: 20,
                    color: 'white',
                    foontWeight: '500',
                },
            },
        ],
        polar: {
            radius: ['44%', '50%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [
            {
                type: 'pie',
                startAngle: 0,
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                data: [
                    {
                        hoverOffset: 1,
                        value: yValue,
                        name: '',
                        itemStyle: {
                            normal: {
                                color: '#00BB94',//合格颜色
                            },
                        },
                        label: {
                            show: false,
                        },
                        labelLine: {
                            normal: {
                                smooth: true,
                                lineStyle: {
                                    width: 2,
                                },
                            },
                        },
                        hoverAnimation: false,
                    },
                    {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            normal: {
                                smooth: true,
                                lineStyle: {
                                    width: 0,
                                },
                            },
                        },
                        value: nValue,
                        hoverAnimation: false,
                        itemStyle: {
                            color: '#DCDCDC',//不合格颜色
                        },
                    },
                ],
            },
            {
                name: '',
                type: 'pie',
                startAngle: 90,
                radius: '63%',
                hoverAnimation: false,
                center: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        labelLine: {
                            show: false,
                        },
                        color: '#306EFF',//圆主颜色
                        shadowBlur: 10,
                        // shadowColor: 'rgba(55,70,130, 1)'
                    },
                },
                data: [
                    {
                        value: 100,
                    },
                ],
            },
        ],
    };

    return option;
}


/**
 柱形3D图表 美化
 xData:["name1","name2",....]
 fData:[12,12,13,.....]
 mData:[12,12,13,.....]
 */
function Chart_ZhX3D(xData, fData, mData, bgColor, title) {
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x - 13, shape.y - 13]
            const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
            const c3 = [xAxisPoint[0], xAxisPoint[1]]
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
    })
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [xAxisPoint[0], xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
            const c4 = [shape.x + 18, shape.y - 9]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
    })
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x + 18, shape.y - 9]
            const c3 = [shape.x + 5, shape.y - 22]
            const c4 = [shape.x - 13, shape.y - 13]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
    })
    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft)
    echarts.graphic.registerShape('CubeRight', CubeRight)
    echarts.graphic.registerShape('CubeTop', CubeTop)

    const MAX = mData
    const VALUE = fData
    option = {
        backgroundColor: bgColor,//"#012366",
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params, ticket, callback) {
                const item = params[1]
                return item.name + ' : ' + item.value;
            }
        },
        title: {
            text: title,
            // subtext: text,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },

        },
        grid: {
            left: 20,
            right: 30,
            bottom: 40,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xData,
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'white'
                }
            },
            offset: 25,
            axisTick: {
                show: false,
                length: 8,
                alignWithLabel: true,
            },
            axisLabel: {
                show: true,
                fontSize: 12 //X轴字体大小
            },
        },
        yAxis: {
            min: 0,
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ededed'//Y轴字体颜色
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "#4E387E"//背景线颜色
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                fontSize: 13,//Y轴字体大小

            },
            boundaryGap: ['20%', '20%']
        },
        series: [
            {
                type: 'custom',
                renderItem: function (params, api) {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: '#15317E'
                            }
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: '#15317E'
                            }
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: '#4863A0'
                            }
                        }]
                    }
                },
                data: MAX
            }, {
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    var color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3EA99F'
                    },
                    {
                        offset: 0.8,
                        color: '#3EA99F'
                    }
                    ])
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00BB94'
                                },
                                {
                                    offset: 0.8,
                                    color: '#00BB94'
                                }
                                ])
                            }
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00BB94'
                                },
                                {
                                    offset: 0.8,
                                    color: '#00BB94'
                                }
                                ])
                            }
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#98FF98'//交汇面颜色
                                },
                                {
                                    offset: 1,
                                    color: '#64E986'
                                }
                                ])
                            }
                        }]
                    }
                },

                data: VALUE
            }, {
                type: 'bar',
                itemStyle: {
                    color: 'transparent',
                },
                tooltip: {

                },
                data: MAX
            }]
    }
    return option;
}

function Chart_ZhXing3D02(xData, yData, title, bgColor) {
    let xaxisData = xData;
    let yaxisData = yData;
    const offsetX = 14;
    const offsetY = 7;
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - offsetX, shape.y - offsetY];
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx
                .moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath();
        },
    });

    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
            const c4 = [shape.x + offsetX, shape.y - offsetY];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        },
    });

    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
            const c3 = [shape.x, shape.y - offsetX];
            const c4 = [shape.x - offsetX, shape.y - offsetY];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        },
    });

    // 注册三个面图形
    echarts.graphic.registerShape("CubeLeft", CubeLeft);
    echarts.graphic.registerShape("CubeRight", CubeRight);
    echarts.graphic.registerShape("CubeTop", CubeTop);

    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            left: 'left',
            top: '2%',
            bottom: '2%',
            textStyle: {
                color: "#ededed",
                fontSize: 14
            },

        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },

            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
            textStyle: {
                fontSize: 12,
                color: "#2C3539",//提示框字体颜色
            },
            formatter: (params, ticket, callback) => {
                const item = params[1];
                return item.name + " : " + item.value + " 个";
            },
        },
        grid: {
            left: "1%",
            right: "0%",

            bottom: "5%",
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: xaxisData,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: '#545454'//提示框颜色
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 10,
                color: '#ededed'//Y轴字体颜色
            }
        },
        yAxis: {
            type: 'value',
            nameTextStyle: {
                fontSize: 12
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: '#545454'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',//线的类型 虚线0
                    opacity: 0.2//透明度
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 12,
                color: '#ededed'
            },
        },
        series: [
            {
                type: "custom",
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: "group",
                        children: [
                            {
                                type: "CubeLeft",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#3BB9FF'
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#3BB9FF',
                                        },
                                        {
                                            offset: 0.95,
                                            color: '#B7CEEC'
                                        },
                                        {
                                            offset: 1,
                                            color: '#B7CEEC'
                                        }
                                    ]),
                                },
                            },
                            {
                                type: "CubeRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#306EFF'
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#306EFF',
                                        },
                                        {
                                            offset: 0.95,
                                            color: '#157DEC'
                                        },
                                        {
                                            offset: 1,
                                            color: '#157DEC'
                                        }
                                    ]),
                                },
                            },
                            {
                                type: "CubeTop",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: '#04d0e2'
                                },
                            },
                        ],
                    };
                },
                data: yaxisData,
            },
            {
                type: "bar",
                itemStyle: {
                    color: "transparent",
                },

                data: yaxisData,
            },
        ],
    };
    return option;
}

/**
  * 堆叠柱形(美化)
  **/
function Chart_DuiZHx(ndata, ydata, names, title, bgColor) {
    var xData2 = names;
    var data1 = ydata;
    var data2 = ndata;
    var barWidth = 25;

    const tooltip = { trigger: 'item' }

    const grid = { left: 105, bottom: 10, top: '1%' }

    const xAxis = {
        type: 'value',
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false },
    }

    const yAxis = {
        type: 'category',
        data: xData2,
        splitLine: { show: false, },
        axisTick: { show: false, },
        axisLine: { show: false, },
        axisLabel: {
            textStyle: { color: '#fff', fontSize: 12, },
            interval: 0,
            margin: 26,
        }
    }

    const series = [{ // 上半截柱子
        name: '2019',
        top: '3%',
        type: 'bar',
        barWidth: barWidth,
        barGap: '-100%',
        z: 0,
        label: {
            show: true,
            position: 'insideRight',
            distance: 15,
            textStyle: { color: '#fff' }
        },
        itemStyle: {
            color: '#163F7A',
            opacity: .7,
        },
        data: data2
    },
    { //下半截柱子
        name: '2020',
        type: 'bar',
        barWidth: barWidth,
        label: { show: true, position: 'insideRight', distance: 15, textStyle: { color: '#fff' } },
        barGap: '-100%',
        itemStyle: { //lenged文本
            opacity: .7,
            color: function (params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#48CCCD' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#48CCCD' // 100% 处的颜色
                }], false)
            }
        },
        data: data1
    },
    { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
        type: 'bar',
        barWidth: barWidth,
        barGap: '-100%',

        itemStyle: {
            color: 'transparent'
        },
        data: data1
    },
    { //上半截柱子顶部圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [15, barWidth],
        symbolOffset: [5, 0],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
            color: '#163F7A',
            opacity: 1,
        },
        label: {
            show: false,
            position: 'center',
            fontSize: 16,
            color: '#fff',
        },
        data: data2
    },
    { //下半截柱子顶部圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [15, barWidth],
        symbolOffset: [6, 0],
        z: 12,
        itemStyle: {
            opacity: 1,
            color: function (params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#48CCCD' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#48CCCD' // 100% 处的颜色
                }], false)
            }
        },
        label: {
            show: false,
            position: 'bottom',
            fontSize: 12,
            color: '#fff',
        },
        symbolPosition: "end",
        data: data1
    },
    { //下半截柱子底部圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [15, barWidth],
        symbolOffset: [-5, 0],
        z: 12,
        itemStyle: {
            opacity: 1,
            color: function (params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#48CCCD' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#48CCCD' // 100% 处的颜色
                }], false)
            }
        },
        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    },

    ]
    var title = {
        text: title,
        top: '2%',
        left: '2%',
        textStyle: {
            color: "rgba(219, 225, 255, 1)",
            fontSize: 14
        }
    }
    option = { title, tooltip, grid, xAxis, yAxis, series, backgroundColor: bgColor }
    return option;
}

/**
 * 纵向柱状图美化
 * 
 */
function Chart_ZhX_3DZ(names, values, totals, title, bgColor) {
    option = {
        backgroundColor: bgColor,
        //你的代码
        color: [
            '#63caff',
            '#49beff',
            '#03387a',
            '#03387a',
            '#03387a',
            '#6c93ee',
            '#a9abff',
            '#f7a23f',
            '#27bae7',
            '#ff6d9d',
            '#cb79ff',
            '#f95b5a',
            '#ccaf27',
            '#38b99c',
            '#93d0ff',
            '#bd74e0',
            '#fd77da',
            '#dea700',
        ],
        title: {
            text: title,
            color: "white",
            top: '2%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },
        },
        grid: {
            containLabel: true,
            left: 20,
            right: 20,
            bottom: 10,
            top: '20%',
        },
        xAxis: {
            axisLabel: {
                color: 'white',
                fontSize: 12,
                interval: 0,
                formatter: function (value) {
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 4; //每项显示文字个数
                    var valLength = value.length; //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) {
                        //如果类目项的文字大于5,
                        for (var i = 0; i < rowN; i++) {
                            var temp = ""; //每次截取的字符串
                            var start = i * maxLength; //开始截取的位置
                            var end = start + maxLength; //结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    } else {
                        return value;
                    }
                },
            },
            axisTick: {
                lineStyle: {
                    color: '#384267',
                },
                show: true,
            },
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#384267',
                    width: 1,
                    type: 'dashed',
                },
                show: true,
            },
            /** 字体倾斜度
            axisLabel: {
                color:"white",
                fontSize: 10,
                interval: 0,
                rotate: 40
            },**/
            data: names,
            type: 'category',
        },
        yAxis: {
            axisLabel: {
                color: '#c0c3cd',
                fontSize: 12,
            },
            axisTick: {
                lineStyle: {
                    color: '#384267',
                    width: 1,
                },
                show: true,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#384267',
                    type: 'dashed',
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#384267',
                    width: 1,
                    type: 'dashed',
                },
                show: true,
            },
            name: '',
        },
        series: [
            {
                data: values,
                type: 'bar',
                barMaxWidth: 'auto',
                barWidth: 25,
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#0b9eff',
                            },
                            {
                                offset: 1,
                                color: '#63caff',
                            },
                        ],
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    distance: 10,
                    color: '#fff',
                },
            },
            {
                data: [1, 1, 1, 1, 1, 1, 1, 1],
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [25, 15],
            },
            {
                data: values,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [25, 12],
                zlevel: 2,
            },
            {
                data: totals,
                type: 'bar',
                barMaxWidth: 'auto',
                barWidth: 25,
                barGap: '-100%',
                zlevel: -1,
            },
            {
                data: [1, 1, 1, 1, 1, 1, 1, 1],
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [25, 15],
                zlevel: -2,
            },
            {
                data: totals,
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbolPosition: 'end',
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [25, 12],
                zlevel: -1,
            },
        ],
        tooltip: {
            trigger: 'axis',
            show: false,
        },
    };
    return option;
}
/**
 * 纵向柱状图美化
 * 
 */
function Chart_Zhx_3D03(xDatas, dlist, title, bgColor) {
    var dataList = dlist;
    // 头部数据
    let topData = dataList.map((item) => {
        return { name: '', value: item.max, symbolPosition: 'end' };
    });
    // 底部立体柱子
    let bottomBar = dataList.map((item) => {
        return {
            value: item.value
        };
    });
    // 底下圆片
    let bottomCircle = dataList.map((item) => {
        return { name: '', value: item.max };
    });
    // 中间圆片
    let middleCircle = dataList.map((item) => {
        return { name: '', value: item.value, symbolPosition: 'end' };
    });
    // 上边的柱子
    let upBar = dataList.map((item) => {
        return { name: item.name, value: item.max - item.value };
    });

    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            // subtext: text,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },

        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.5)',
            borderColor: 'rgba(89,211,255,1)',
            borderWidth: 2,
            padding: 5,
            textStyle: {
                color: 'rgba(89,211,255,1)',//提示框
                fontSize: 14,
                width: 200,
                height: 40
            },
            formatter: '{c}' + '%',
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
            // 自定义的 CSS 样式
        },
        grid: {
            bottom: '20%',
            top: '35%',
            right: '2%',
            left: '2%'
        },
        xAxis: {
            data: xDatas,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
                margin: 30 //刻度标签与轴线之间的距离。
            }
        },
        yAxis: {
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            }
        },
        series: [
            // 头
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [60, 45],
                symbolOffset: [0, -20],
                z: 12,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(54,127,223,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(94,162,254,1)'
                                }
                            ],
                            false
                        )
                    }
                },
                data: topData
            },
            //底部立体柱
            {
                stack: '1',
                type: 'bar',
                silent: true,
                barWidth: 60,
                data: bottomBar,
                itemStyle: {
                    normal: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    //第一节下面
                                    offset: 0,
                                    color: 'rgba(0,255,245,0.5)'
                                },
                                {
                                    offset: 1,
                                    color: '#43bafe'
                                }
                            ]
                        }
                    }
                }
            },
            //最底下的圆片
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [60, 30],
                symbolOffset: [0, 16],
                z: 12,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(89,211,255,1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(23,237,194,1)'
                            }
                        ])
                    }
                },
                data: bottomCircle
            },
            // 中间圆片
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [60, 42],
                symbolOffset: [0, -20],
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(89,211,255,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(23,237,194,1)'
                                }
                            ],
                            false
                        )
                    }
                },
                z: 12,
                data: middleCircle
            },
            //上部立体柱
            {
                //上部立体柱
                stack: '1',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#3E8BE6',
                        opacity: 0.7
                    }
                },
                label: {
                    show: true,
                    position: 'top', //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
                    distance: 25,
                    color: 'white',
                    fontSize: 16,
                    formatter: function (item) {
                        var a = 100;
                        var nvalue = (a - item.value).toFixed(1);
                        return nvalue + ' %';
                    }
                },
                silent: true,
                barWidth: 100,
                //barGap: '-100%', // Make series be overlap
                data: upBar
            }
        ]
    };
    return option;
}
/**
 * 柱形图表 进度线
datas:[{name:"a",value:12},{name:"b",value:12},....]
 **/
function Chart_Zhx_line(datas, bgColor, title) {

    const myColor = ["#38ACEC"].reverse();
    const xData = datas.map((item) => item.name);
    const yData = datas.map((item) => item.value);
    const maxData = [100, 100, 100, 100, 100];
    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },

        },
        grid: {
            left: "5%",
            right: "15%",
            bottom: "5%",
            top: "10%",
            containLabel: false,
        },
        xAxis: [
            {
                show: false,
            },
            {
                show: false,
            },
        ],
        yAxis: [
            {
                show: false,
                inverse: true,
                data: yData,

            },
            {
                show: true,
                data: yData,
                //offset: -5,//
                position: "right",
                axisLabel: {
                    lineHeight: 0,
                    verticalAlign: "bottom",
                    fontSize: 11,
                    color: "white",
                    formatter: "{value}" + "%",
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "进度",
                show: true,
                type: "bar",
                barGap: "-50%",
                xAxisIndex: 1,
                barWidth: 3,
                itemStyle: {
                    borderRadius: 3,
                    color: (params) => {
                        var num = myColor.length;
                        return {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#0F1F45",
                                },
                                {
                                    offset: 1,
                                    color: myColor[params.dataIndex % num],
                                },
                            ],
                        };
                    },
                },
                // max: 0,
                labelLine: {
                    show: false,
                },
                z: 2,
                data: yData,
            },
            {
                name: "外圆",
                type: "scatter",
                emphasis: {
                    scale: false,
                },
                xAxisIndex: 1,
                symbolSize: 10,
                itemStyle: {
                    color: (params) => {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num];
                    },
                    shadowColor: "rgba(255, 255, 255, 0.5)",
                    shadowBlur: 5,
                    borderWidth: 1,
                    opacity: 1,
                },
                z: 2,
                data: yData,
            },
            {
                name: "年份",
                z: 1,
                show: true,
                type: "bar",
                xAxisIndex: 1,
                barGap: "-100%",
                barWidth: 4,
                itemStyle: {
                    borderRadius: 4,
                    color: "#837E7C",//线条主颜色
                },
                label: {
                    show: true,
                    position: [0, -25],

                    fontSize: 12,
                    color: "white",//字体颜色
                    formatter: function (data) {
                        return xData[data.dataIndex];
                    },
                },
                data: maxData,
            },
        ],
    };
    return option;
}
/**
 * @param {any} xData
 * @param {any} dlist
 * @param {any} title
 * @param {any} bgColor
 */
function Chart_ZhX051701(xData, dlist, title, bgColor) {
    let xaxisData = xData;//["电子信息", "计算机软件", "金融", "化工", "种植业", "电商", "互联网"];
    let yaxisData = dlist;//[90, 80, 100, 70, 65, 69, 80];

    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            // subtext: text,
            left: 'left',
            top: '3%',
            left: '2%',
            textStyle: {
                color: "rgba(219, 225, 255, 1)",
                fontSize: 14
            },

        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            backgroundColor: "rgba(255,255,255,0.75)",
            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
            textStyle: {
                fontSize: 12,//提示框字体大小
                color: "#000",
            },
            formatter: (params) => {
                const item = params[0];
                return item.name + " : " + item.value;
            },
        },
        grid: {
            left: "7%",
            right: "10%",
            top: "15%",
            bottom: "10%",
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                axisLabel: {
                    interval: 0,
                    color: "#fff",
                    fontSize: 12,
                    formatter: function (value) {
                        var ret = ""; //拼接加\n返回的类目项
                        var maxLength = 4; //每项显示文字个数
                        var valLength = value.length; //X轴类目项的文字个数
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 1) {
                            //如果类目项的文字大于5,
                            for (var i = 0; i < rowN; i++) {
                                var temp = ""; //每次截取的字符串
                                var start = i * maxLength; //开始截取的位置
                                var end = start + maxLength; //结束截取的位置
                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                temp = value.substring(start, end) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    },
                },
                axisLine: {
                    lineStyle: {
                        //y轴网格线设置
                        color: "rgba(0, 168, 255, 0.4)",
                        width: 1,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xaxisData,
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "",
                nameTextStyle: {
                    color: "red",
                    fontWeight: 400,
                    fontSize: 14,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(0, 168, 255, 0.3)",//Y轴线颜色
                        width: 1,
                    },
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    color: "#fff",//Y轴刻度字体颜色
                },
            },
        ],
        series: [
            {
                type: "bar",
                barWidth: 16,
                label: {
                    show: true,
                    position: "top",
                    color: "white",//柱形图标签颜色
                },
                itemStyle: {
                    borderRadius: [8, 8, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "#00A8FF",
                        },
                        {
                            offset: 1,
                            color: "rgba(0, 122, 255, 0)",
                        },
                    ]),
                },
                data: yaxisData,
            },
        ],
    };
    return option;
}
/**
 * 多饼状图数据显示（参数最多5个，如需多增，需要先添加颜色）
 * 参数格式：[{name:"a",value:"2"},{name:"a",value:"2"}....]
 */
function chart_MorePie(datas) {
    var data = datas;
    var titleArr = [], seriesArr = [];
    colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
    data.forEach(function (item, index) {
        titleArr.push(
            {
                text: item.name,
                left: index * 20 + 10 + '%',
                top: '74%',
                textAlign: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: '12',
                    color: colors[index][0],
                    textAlign: 'center',
                },
            }
        );
        seriesArr.push(
            {
                name: item.name,
                type: 'pie',
                clockWise: false,
                radius: [40, 55],
                itemStyle: {
                    normal: {
                        color: colors[index][0],
                        shadowColor: colors[index][0],
                        shadowBlur: 0,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                    }
                },
                hoverAnimation: false,
                center: [index * 20 + 10 + '%', '42%'],
                data: [{
                    value: item.value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + '%';
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: colors[index][0]
                            }
                        }
                    },
                }, {
                    value: 100 - item.value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: colors[index][1]
                        },
                        emphasis: {
                            color: colors[index][1]
                        }
                    }
                }]
            }
        )
    });

    option = {
        backgroundColor: "#fff",
        title: titleArr,
        series: seriesArr
    }
    return option;
}
/**
 * 柱形合格不合格
 * @param 标题 title
 * @param x轴文本集合 names
 * @param  合格数据 yData
 * @param 不合格数据集合 nData
 * @param 背景颜色 bgColor
 */
function chart_ZHXHGBHG(title, names, yData, nData, bgColor) {
    var option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            left: '5',
            top: "10",
            // padding: [10, 0, 0, 50],
            textStyle: {
                color: "#000",
                fontSize: 12,
                fontWeight: 600,
                // padding: [0, 0, 0, 35]
            },
        },

        tooltip: {
            trigger: 'axis',
            backgroundColor: "rgba(1, 13, 19, 0.5)",
            borderWidth: 0,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                color: "rgba(212, 232, 254, 1)",
                // fontSize: fontChart(0.24),
            },
            confine: true
        },
        grid: {
            top: '25%',
            left: '3%',
            right: '3%',
            bottom: '2%',
            containLabel: true,
        },
        legend: {
            data: ['合格', '不合格'],
            left: "center",
            top: 30,
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 15,
            borderRadius: 4,
            textStyle: {
                color: "#000",
                fontSize: 12,
                fontWeight: 400,
            },
        },
        xAxis: {
            type: 'category',
            data: names,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ECECEC'
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                // interval: 0,
                // rotate: 40,
                show: true,
                textStyle: {
                    fontFamily: 'Microsoft YaHei',
                    color: '#666666'
                },
                formatter: function (value) {
                    var ret = '';
                    var maxLength = 5; // 换行字数
                    var valLength = value.length;
                    var rowN = Math.ceil(valLength / maxLength);
                    if (rowN > 1) {
                        for (var i = 0; i < rowN; i++) {
                            var temp = '';
                            var start = i * maxLength;
                            var end = start + maxLength;
                            temp = value.substring(start, end) + '\n';
                            ret += temp;
                        }
                        return ret;
                    } else {
                        return value;
                    }
                }
            },
        },

        yAxis: {
            name: '',
            nameTextStyle: {
                color: "#000",
                fontSize: 14,
                fontWeight: 600,
                padding: [10, 0, 0, -30]
            },
            nameGap: 25,  // 表现为上下位置
            type: 'value',
            //max:'5000',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#666666',
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ECECEC'
                }
            },
            axisLabel: {
                textStyle: {
                    fontFamily: 'Microsoft YaHei',
                    color: '#393939',
                    fontSize: 12
                }
            }
        },
        series: [
            {
                name: '合格',
                type: 'bar',
                barWidth: '25',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#3BB9FF'
                        }, {
                            offset: 1,
                            color: '#5CB3FF'
                        }]),

                    }
                },
                data: yData
            },

            {
                name: '不合格',
                type: 'bar',
                barWidth: '25',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FBB117'
                        }, {
                            offset: 1,
                            color: '#FFA62F'
                        }]),

                    }
                },
                data: nData
            }
        ]
    };
    return option;
}
/**
 * 纵向柱形图
 * @param 数据 datas
 * @param 标题 title
 * @param 背景颜色 bgColor
 */
function Chart_ZhXZX(datas, title, bgColor) {
    let data = datas;
    option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            left: '5',
            top: "10",
            // padding: [10, 0, 0, 50],
            textStyle: {
                color: "#000",
                fontSize: 12,
                fontWeight: 600,
                // padding: [0, 0, 0, 35]
            },
        },
        grid: {
            top: 45,
            left: 13,
            right: 60,
            bottom: 10,
            containLabel: true
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            show: true,
            inverse: true,
            type: 'category',
            axisLine: {
                show: false
            }
        },
        series: [{
            name: 'label',
            type: 'bar',
            barWidth: 15,
            yAxisIndex: 0,
            label: {
                show: true,
                position: 2,
                color: '#262C41',
                fontSize: 11
            },
            data: data.map((item) => {
                return {
                    value: 0,
                    label: {
                        formatter() {
                            return item.label;
                        }
                    }
                };
            })
        }, {
            name: 'value',
            type: 'bar',
            barWidth: 10,
            barMinHeight: 20, // 最小高度
            yAxisIndex: 0,
            label: {
                show: true,
                position: 'right',
                fontSize: 12,
                offset: [0, 0],
                formatter({
                    value
                }) {
                    return `${value}` + "%";
                }
            },
            itemStyle: {
                barBorderRadius: [0, 4, 4, 0]
            },
            data: data.map(({
                value
            }, index) => {
                let color = colors[index % colors.length];
                return {
                    value,
                    label: {
                        color
                    },
                    itemStyle: {
                        color
                    }
                };
            })
        }]
    };
    return option;
}

/**
 * 横向柱形图(美化)
 * names:['名称1','名称2',...]
 * values:[数值1,数值2,...]
 */
function ChartZhuXingHX(names, values, title) {
    var option = {
        tooltip: {
            showContent: true,
            trigger: 'axis',
            backgroundColor: 'rgba(8,36,68,.7)',
            color: '#fff',
            textStyle: {
                color: '#fff'
            },
        }, title: {
            text: title,
            left: '10',
            top: "10",
            // padding: [10, 0, 0, 50],
            textStyle: {
                color: "#fff",
                fontSize: 12,
                fontWeight: 600,
                // padding: [0, 0, 0, 35]
            },
        },
        textStyle: {
            "color": "#fff",
            "fontSize": 13
        },
        grid: {
            top: '21%',
            left: '10%',
            bottom: '25%',
            right: '5%'
        },
        xAxis: {
            //position:top, //x轴文字在图表上方
            nameTextStyle: {
                "color": "#c0c3cd",
                "padding": [0, 0, -10, 0],
                "fontSize": 14
            },
            axisLabel: {
                interval: 0,

                textStyle: {
                    color: '#fff' //坐标轴字颜色
                },
                margin: 15,
                formatter: function (value) {
                    var ret = '';
                    var maxLength = 7; // 换行字数
                    var valLength = value.length;
                    var rowN = Math.ceil(valLength / maxLength);
                    if (rowN > 1) {
                        for (var i = 0; i < rowN; i++) {
                            var temp = '';
                            var start = i * maxLength;
                            var end = start + maxLength;
                            temp = value.substring(start, end) + '\n';
                            ret += temp;
                        }
                        return ret;
                    } else {
                        return value;
                    }
                }
            },
            axisTick: {
                show: true //隐藏X轴刻度
            },
            splitLine: {     //网格线
                "show": false
            },
            data: names,
            type: "category"
        },
        yAxis: {
            //inverse: true,//控制Y轴从上往下开始，即0在上
            name: '',
            axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                    color: '#11417a'
                }
            },
            axisTick: {
                show: false //隐藏X轴刻度
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
            splitLine: {     //网格线
                "show": false
            }
        },
        series: [
            {
                name: '',
                data: values,
                "type": "bar",
                "showBackground": true,
                backgroundStyle: {
                    color: "rgb(228, 232, 233, 0.10)"
                },
                "barMaxWidth": "auto",
                // "barWidth": 7,
                "barWidth": 17,
                "itemStyle": {
                    barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
                    normal: {

                        color: function (params) {
                            var colorList = colors;
                            return colorList[params.dataIndex];
                        }
                    }
                },
                "label": {
                    "show": true,
                    "position": "top",
                    "distance": 10,
                    "color": "#fff",
                    "fontSize": 13
                }
            },
        ],
    };
    return option;
}


function ChartZhuXingHX1(names, values, lasts, title) {
    var option = {
        tooltip: {
            showContent: true,
            trigger: 'axis',
            backgroundColor: 'rgba(8,36,68,.7)',
            color: '#fff',
            textStyle: {
                color: '#fff'
            },
        }, title: {
            text: title,
            left: '45%',
            top: "10",
            // padding: [10, 0, 0, 50],
            textStyle: {
                color: "#fff",
                fontSize: 13,
                fontWeight: 600,
                // padding: [0, 0, 0, 35]
            },
        },
        textStyle: {
            "color": "#fff",
            "fontSize": 13
        },
        grid: {
            top: '21%',
            left: '9%',
            bottom: '25%',
            right: '7%'
        },
        legend: {
            show: true,   // 显示图例
            left: "75%",   // 图例组件离容器左侧的距离
            textStyle: {             // 图例文本样式      
                color: "white",
            },
        },
        color: ["#5870C4", "#8FCC78"],//, "#fac858", "#ee6666"
        xAxis: {
            //position:top, //x轴文字在图表上方
            nameTextStyle: {
                "color": "#c0c3cd",
                "padding": [0, 0, -10, 0],
                "fontSize": 14
            },
            axisLabel: {
                interval: 0,

                textStyle: {
                    color: '#fff' //坐标轴字颜色
                },
                margin: 15,
                formatter: function (value) {
                    var ret = '';
                    var maxLength = 7; // 换行字数
                    var valLength = value.length;
                    var rowN = Math.ceil(valLength / maxLength);
                    if (rowN > 1) {
                        for (var i = 0; i < rowN; i++) {
                            var temp = '';
                            var start = i * maxLength;
                            var end = start + maxLength;
                            temp = value.substring(start, end) + '\n';
                            ret += temp;
                        }
                        return ret;
                    } else {
                        return value;
                    }
                }
            },
            axisTick: {
                show: true //隐藏X轴刻度
            },
            splitLine: {     //网格线
                "show": false
            },
            data: names,
            type: "category"
        },
        yAxis: [
            {
                //inverse: true,//控制Y轴从上往下开始，即0在上
                name: '单位:万元',
                axisLine: {
                    show: true, //隐藏X轴轴线
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 10
                    }

                },
                axisTick: {
                    show: false //隐藏X轴刻度
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 11
                    }
                },
                splitLine: {     //网格线
                    "show": false
                }
            },

            {
                //inverse: true,//控制Y轴从上往下开始，即0在上
                name: '',
                axisLine: {
                    show: true, //隐藏X轴轴线
                    lineStyle: {
                        color: '#11417a'
                    }
                },
                axisTick: {
                    show: false //隐藏X轴刻度
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 11
                    }
                },
                splitLine: {     //网格线
                    "show": false
                }
            },
        ],
        series: [
            {
                name: '本期',
                data: values,
                "type": "bar",
                "showBackground": true,
                backgroundStyle: {
                    color: "rgb(228, 232, 233, 0.10)"
                },
                "barMaxWidth": "auto",
                // "barWidth": 7,
                "barWidth": 17,
                "itemStyle": {
                    barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
                    normal: {

                        //color: function (params) {
                        //    var colorList = colors;
                        //    return colorList[params.dataIndex];
                        //}
                        //color:'#5870C4'
                    }
                },
                "label": {
                    "show": true,
                    "position": "top",
                    "distance": 10,
                    "color": "#fff",
                    "fontSize": 13
                }
            },

            {
                name: '上期',
                data: lasts,
                "type": "bar",
                "showBackground": true,
                backgroundStyle: {
                    color: "rgb(228, 232, 233, 0.10)"
                },
                "barMaxWidth": "auto",
                // "barWidth": 7,
                "barWidth": 17,
                "itemStyle": {
                    barBorderRadius: [7, 7, 0, 0], // 圆角（左上、右上、右下、左下）
                    normal: {

                        //color: function (params) {
                        //    var colorList = colorsd;
                        //    return colorList[params.dataIndex];
                        //}
                        //color: '#8FCC78',
                    }
                },
                "label": {
                    "show": true,
                    "position": "top",
                    "distance": 10,
                    "color": "#fff",
                    "fontSize": 13
                }
            },
        ],
    };
    return option;
}
